* {
  margin: 0;
  padding: 0;
}
.game-mine {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.game-main {
  margin: 20px auto;
}
.game-row {
  display: flex;
}
.game-col {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 1px solid #000;
  border-radius: px;
  margin: 4px;
  font-size: 20px;
  font-weight: 600;
  position: relative;

  z-index: 1;
}
.game-col-1 {
  color: #f00;
}
.game-col-2 {
  color: rgb(0, 132, 255);
}
.game-col-3 {
  color: rgb(226, 81, 24);
}
.game-col-4 {
  color: rgb(14, 134, 44);
}
.game-col-grid {
  background: #969393;
}
.game-mine {
  color: #f00;
}
.game-mark {
  background: #f00;
}

.game-header {
  width: 400px;


  margin: 10px auto;
}
.game-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.game-header .game-label {
  display: block;
  width: 30%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #333;
  background: #cac8c8;
  cursor: pointer;
  transition: 0.5;
  margin: 10px auto;
}

.game-header .game-start:hover,
.game-mark:hover,
.game-open:hover {
  transform: scale(1.05);
  background: #f60;
  color: #fff;
}
.game-header span.active {
  background: #f60;
  color: #fff;
}
.game-header .game-start.active:hover,
.game-mark.active:hover,
.game-mine.active:hover {
  transform: scale(0.95);
  color: #333;
  background: #cac8c8;
}
